import React, {Component} from 'react';
import {Spin, Row, Col} from 'antd';
import '../css/register.css';
import {Search,Head} from '../components/EditComponent';
import app from '../AppMethod';
import {customer} from "../value";
import moment from 'moment';
import ReactPullLoad, {STATS} from 'react-pullload';
import '../../node_modules/react-pullload/dist/ReactPullLoad.css';

class SearchOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loading: false,
            hasMore: true,
            action: STATS.init,
            index: 5,
            customer_id: '',
            page: 0,
            size: 4
        }
    };

    render() {
        const {hasMore} = this.state;
        return (
            <div className="registerContainer">
                <div style={{position:'fixed',width:'100%',height:'44px',top:0,left:0,zIndex:4}}>
                    {/*<Search type="客户编号" handleSearchData={(id) => this.handleGetCustomerId(id)}/>*/}
                    <Head back="false" type="客户编号" handleSearchData={(id)=>this.handleGetCustomerId(id)} click={() => this.handleBack()}/>
                </div>
                <Spin spinning={this.state.loading}>
                    <ReactPullLoad
                        action={this.state.action}
                        handleAction={this.handleAction}
                        hasMore={hasMore}
                        distanceBottom={1000}
                        style={{paddingTop:44}}
                    >
                        <div>
                            {
                                this.state.data.length > 0 ?
                                    this.state.data.map((item, index) => {
                                        return (
                                            <OrderItem key={index} data={item}/>
                                        )
                                    }) : ''
                            }
                        </div>
                    </ReactPullLoad>
                    {
                        this.state.data.length<=0?<div style={{textAlign: 'center', marginTop: '44px'}}>暂无数据</div>:''
                    }
                </Spin>
            </div>
        )
    };

    componentDidMount() {

    };

    /**
     * 获取输入框的值
     * @param id
     */
    async handleGetCustomerId(id) {
        let data = {
            page: 1,
            customer_id: id
        };
        let orderData = await this.handleSearchData(data,1);
        this.setState({data: orderData});
    }

    /**
     * 根据输入框输入的客户id查询订单列表
     * @param id
     */
    async handleSearchData(data,type) {
        if (data.page === 1&&type===1) {
            this.setState({loading: true});
        }
        this.setState({customer_id: data.customer_id});
        data.size = this.state.size;
        let result = await app.post(customer.CUSTOMER_OUTPUTLIST, data);
        if (result.code === 1) {
            let count = result.data.count;
            let allPage;
            if (count % this.state.size > 0) {
                allPage = parseInt(count / this.state.size) + 1;
            } else {
                allPage = count / this.state.size;
            }
            let orderData = result.data.dataSet;
            for (let i = 0; i < orderData.length; i++) {
                orderData[i].output_order_time = orderData[i].output_order_time == null ? '' : moment(orderData[i].output_order_time).format('YYYY-MM-DD');
            }
            let hasMore=false;
            if(allPage>1){
                hasMore=true;
            }
            this.setState({loading: false, page: data.page, index: allPage,hasMore});
            return orderData;
        } else {
            this.setState({loading: false});
            let result = [];
            return result;
        }
    };

    /**
     * 判断组件行为状态
     * @param action
     */
    handleAction = (action) => {
        console.log(action, this.state.action, action === this.state.action);
        if (action === this.state.action) {
            return false;
        }
        if (action === STATS.refreshing) {//刷新
            this.handleRefreshing();//调用刷新事件
        } else if (action === STATS.loading) {//加载更多
            this.handleLoadMore();//调用加载更多事件
        } else {
            this.setState({action: action});
        }
    };

    /**
     * 处理下拉刷新事件
     * @returns {boolean}
     */
    handleRefreshing = async () => {
        if (STATS.refreshing === this.state.action) {
            return false;
        }
        let data = {
            page: 1,
            customer_id: this.state.customer_id
        };
        let orderData = await this.handleSearchData(data,2);
        let index = this.state.index;
        setTimeout(() => {
            //完成刷新
            this.setState({
                data: orderData,
                hasMore: index > 1 ? true : false,
                action: STATS.refreshed,
            })
        }, 2000);

        this.setState({
            action: STATS.refreshing
        })
    };

    /**
     * 处理上拉加载更多事件
     * @returns {boolean}
     */
    handleLoadMore = async () => {
        if (STATS.loading === this.state.action) {
            return false;
        }
        if(!this.state.hasMore){
            return false;
        }
        let data = {
            page: this.state.page + 1,
            customer_id: this.state.customer_id
        };
        let orderData = await this.handleSearchData(data,2);
        setTimeout(() => {
            if (this.state.index === 0) {
                this.setState({
                    action: STATS.reset,
                    hasMore: false
                });
            } else {
                this.setState({
                    data: [...this.state.data, ...orderData],
                    action: STATS.reset,
                    index: this.state.index - this.state.page
                })
            }
        }, 2000);
        this.setState({action: STATS.loading})
    };

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    };
}

/**
 * 订单组件
 */
class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {
            output_status, output_num, output_order_time, output_logistics_type, car_check_num, car_express_num,
            car_logistics_name, car_logistics_phone, car_last_status
        } = this.props.data;
        let text = '';
        let type = '';
        if (output_status == 0) {
            text = '待接单';
        } else if (output_status == 1) {
            text = '已接单';
        } else if (output_status == 2) {
            text = '配货中';
        } else if (output_status == 3) {
            text = '待对货';
        } else if (output_status == 4) {
            text = '待配送';
        } else if (output_status == 5) {
            text = '待改单';
        } else if (output_status == 6) {
            text = '配送中';
        } else if (output_status == 7) {
            text = '已完成';
        }
        let logistics_type = Number(output_logistics_type);
        switch (logistics_type) {
            case 0:
                type = "自主物流";
                break;
            case 1:
                type = "送市场";
                break;
            case 2:
                type = "托运";
                break;
            case 3:
                type = "快递";
                break;
            case 4:
                type = "自提";
                break;
            default:
                type = '';
                break;
        }
        return (
            <Row style={{backgroundColor: '#fff', borderBottom: '1px solid #e8e8e8', padding: '20px 22px'}}>
                <Row style={{height: '30px', lineHeight: '30px'}}>
                    <Col style={{width: '200px', float: 'left'}}>订单号：{output_num}</Col>
                    <Col style={{width: '154px', float: 'left'}}>状态：{text}</Col>
                </Row>
                <Row style={{height: '30px', lineHeight: '30px'}}>
                    <Col style={{width: '200px', float: 'left'}}>下单日期：{output_order_time}</Col>
                    <Col style={{width: '154px', float: 'left'}}>物流类型：{type}</Col>
                </Row>
                {
                    logistics_type == 2 ?
                        <Row>
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col style={{width: '200px', float: 'left'}}>托运单号：{car_check_num}</Col>
                                <Col style={{width: '200px', float: 'left'}}>物流公司：{car_logistics_name}</Col>
                            </Row>
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col style={{width: '200px', float: 'left'}}>物流电话：{car_logistics_phone}</Col>
                            </Row>
                        </Row> : ''
                }
                {
                    logistics_type == 3 ?
                        <Row style={{height: '30px', lineHeight: '30px'}}>
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col style={{width: '200px', float: 'left'}}>快递单号：{car_express_num}</Col>
                                <Col style={{width: '154px', float: 'left'}}>物流公司：{car_logistics_name}</Col>
                            </Row>
                            <Row style={{height: '30px', lineHeight: '30px'}}>
                                <Col style={{
                                    width: '100%',
                                    float: 'left'
                                }}>最新物流信息：{car_last_status == null ? '暂无物流信息' : car_last_status}</Col>
                            </Row>
                        </Row> : ''
                }
            </Row>
        )
    }
}

export default SearchOrder;